<template>
    <!-- 个人认证 -->
    <div>
        <div class="header flexleft">
            <div class="shutup pointer" @click="back">
                <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
            </div>
            <div class="margin-left1 margin-right3">
                <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
            </div>
            <div class="title">实名认证</div>
        </div>
        <div class="pagepadding">
            <div class="ffffff radius">
                <ul class="flexbetween bottomline mainpadding">
                    <li>确认本人身份信息</li>
                    <li class="pointer" @click="goHelp"><i class="el-icon-document"></i><span class="margin-left1">帮助文档</span></li>
                </ul>
                <div class="margin-top4 contentpadding">
                    <div class="itemtext"><span class="redstar">*</span>认证方式</div>
                    <ul class="flexbetween margin-top1">
                        <li class="flexleft pointer" :class="type == 2 ? 'itembox' : 'noitembox'" @click="changetype(2)">
                            <img src="@/assets/img/login/face.svg" alt="">
                            <span class="titletext margin-left1">人脸识别</span>
                        </li>
                        <!-- <li class="flexleft pointer" :class="type == 1 ? 'itembox' : 'noitembox'" @click="changetype(1)">
                            <img src="@/assets/img/login/phone.svg" alt="">
                            <span class="titletext margin-left1">手机认证</span>
                        </li> -->
                    </ul>

                    <!-- <el-form :model="legalPersonTabSecondModel" ref="legalPersonTabSecondModelElRef" :rules="legalPersonTabSecondRules" class="flexbetween" v-show="type==2">
                        <el-col :span="12" style="padding-right:10px;">
                            <el-form-item class="modelRight" label="姓名" prop="legalPerson">
                                <el-input v-model="legalPersonTabSecondModel.legalPerson" placeholder="在此输入姓名"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding-left:10px;">
                            <el-form-item class="modelRight" label="身份证号" prop="idcard">
                                <el-input v-model="legalPersonTabSecondModel.idcard" :maxlength="18" placeholder="在此输入身份证号" show-word-limit />
                            </el-form-item>
                        </el-col>
                    </el-form> -->

                    <!-- <el-form v-show="type==1" :model="legalPersonTabFirstModel" ref="legalPersonTabFirstModelElRef" :rules="legalPersonTabFirstRules"> -->
                    <el-form v-show="type==2" :model="legalPersonTabFirstModel" ref="legalPersonTabFirstModelElRef" :rules="legalPersonTabFirstRules">
                        <el-col :span="12" style="padding-right:10px;">
                        <el-form-item class="modelRight" label="姓名" prop="legalPerson">
                            <el-input v-model="legalPersonTabFirstModel.legalPerson" placeholder="在此输入姓名" show-word-limit />
                        </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding-left:10px;">
                        <el-form-item class="modelRight" label="身份证号" prop="idcard">
                            <el-input v-model="legalPersonTabFirstModel.idcard" :maxlength="18" placeholder="在此输入身份证号" show-word-limit />
                        </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding-right:10px;">
                        <el-form-item class="modelRight" label="手机号" prop="phone">
                            <el-input v-model="legalPersonTabFirstModel.phone" :maxlength="11" placeholder="在此输入手机号" show-word-limit>
                            </el-input>
                        </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12" style="padding-left:10px;">
                        <el-form-item class="modelRight" label="手机验证码" prop="phoneCode">
                            <el-input v-model="legalPersonTabFirstModel.phoneCode" :maxlength="4" placeholder="在此输入手机验证码" show-word-limit >

                                <template slot="append">
                                    <el-button type="text" style="margin: 0 5px" @click="getCodeNumber">{{codeNumber}}</el-button>
                                </template> 
                            </el-input>
                        </el-form-item>
                        </el-col> -->
                    </el-form>

                    <div class=" xyzc flexright">
                        <el-checkbox v-model="checked"></el-checkbox>
                        <span class="margin-left1">我已阅读并同意</span>
                        <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                        <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                        <span class="lan pointer" @click="showdialog(3)">《数字证书服务协议》</span>
                    </div>
                    <div class="margin-top1 flexright">
                        <el-checkbox v-model="checked1"></el-checkbox>
                        <span class="margin-left1">我同意大鸿签采集人脸识别数据用于认证服务</span>
                    </div>
                    <div class="margin-top1 flexright">
                        <el-button type="primary" @click="agreeContinue">同意并继续</el-button>
                    </div>

                </div>
            </div>
        </div>
        <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <div v-html="content" class="scroll"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 扫码完成认证 -->
        <el-dialog :visible.sync="scanshow" width="20%" :before-close="handleClose">
            <div class="scancertificat">
                <p class="titletext">扫码完成个人认证</p>
                <p class="margin-top1">使用微信或其他app扫描二维码进行刷脸认证</p>
                <div class="flexcenter">
                    <Scancertificat 
                        v-if="scanshow"
                        :url="scanurl" ref="scanmsg" type="pay" 
                        @double="double"
                    ></Scancertificat>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Scancertificat from "./components/scanCertificat.vue"
import Cookies from "js-cookie";
import {
  postSmsPhoneCode,
} from "@/api/company";
import {
  realNameAuthentication,
} from "@/api/userinfo";
import { getPrivacyAgreement, getRegistrationProtocol } from '@/api/index'



const legalPersonTabFirstModelRef = {
  legalPerson: '',
  idcard: '',
  phone: '',
  phoneCode: ''
}
const legalPersonTabSecondModelRef = {
  legalPerson: '',
  idcard: ''
}

export default {
    components: {
        Scancertificat
    },
    data() {
        return {
            checked:false,
            checked1:false,
            type: 2,

            legalPersonTabFirstModel: Object.assign({}, legalPersonTabFirstModelRef),
            legalPersonTabSecondModel: Object.assign({}, legalPersonTabSecondModelRef),
            legalPersonTabFirstRules: {
                legalPerson: [
                    { required: true, message: "请填写姓名", trigger: "blur" }
                ],
                idcard: [
                    { required: true, message: "请填写身份证号", trigger: "blur" },
                    { pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                        message: "请输入正确的身份证号",
                        trigger: "blur"
                    }
                ],
                phone: [
                    { required: true, message: "请填写手机号", trigger: "blur" },
                    { pattern: /^1\d{10}$/, message: "请填写正确的手机号", trigger: "blur" }
                ],
                phoneCode: [{ required: true, message: "请填写验证码", trigger: "blur" }]
            },
            legalPersonTabSecondRules: {
                legalPerson: [
                { required: true, message: "请填写姓名", trigger: "blur" }
                ],
                idcard: [
                { required: true, message: "请填写身份证号", trigger: "blur" },
                { pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                    message: "请输入正确的身份证号",
                    trigger: "blur"
                }
                ],
            },
            codeNumber: '获取验证码',
            



            dialogVisible: false,//对话框
            dialogtitle: "大鸿签服务协议",//对话框框标题
            content: "",
            scanshow: false,
            scanurl:"",//二维码路径
        }
    },
    mounted(){
        console.log(this.$store.state.user.token);
    },
    methods: {
        getCodeNumber(){
            if(this.legalPersonTabFirstModel.phone==''){
                this.$message.warning('请输入手机号')
                return
            }
            
            if(this.legalPersonTabFirstModel.phone && this.codeNumber === '重新发送' || this.codeNumber === '获取验证码') {
                postSmsPhoneCode({phone: this.legalPersonTabFirstModel.phone}).then(res=>{
                    if(res.code === 200){
                        this.$message.success(res.message)
                    }
                })
                let seconds = 60
                this.codeNumber = seconds + 's后重新发送'
                let interval = setInterval(() => {
                    this.codeNumber = seconds -= 1
                    this.codeNumber += 's后重新发送'
                    if (seconds <= 0) {
                        clearInterval(interval)
                        this.codeNumber = '重新发送'
                    }
                }, 1000)
            }
        },
        showdialog(value) {
            this.dialogVisible = true
            if (value == 1) {
                this.dialogtitle = "大鸿签服务协议"
                getRegistrationProtocol().then(res => {
                    this.content = res.result.data.agreement
                })
            } else {
                this.dialogtitle = "大鸿签隐私政策"
                getPrivacyAgreement().then(res => {
                    this.content = res.result.data.agreement
                })
            }
        },
        handleClose(done) {
            done();
        },
        changetype(value) {
            this.type = value
        },
        // 同意并继续
        agreeContinue() {
            let _this=this
            if(this.type==1){
                this.$refs.legalPersonTabFirstModelElRef.validate(bool=>{
                    if(bool){
                        if(this.checked==false||this.checked1==false){
                            this.$message.warning('请勾选并同意《大鸿签服务协议》《隐私政策》《数字证书服务协议》及 大鸿签采集人脸识别数据用于认证服务')
                            return
                        }
                        let perInfo=_this.legalPersonTabFirstModel
                        realNameAuthentication({
                            code:perInfo.phoneCode,
                            idNumber:perInfo.idcard,
                            userPhone:perInfo.phone,
                            userId:Cookies.get('admin_id'),
                            userName:perInfo.legalPerson
                        }).then(res=>{
                            if(res.code === 200){
                                this.$message({
                                    type: 'success',
                                    message: res.message,
                                    duration: 2000
                                })
                                setTimeout(()=>{
                                    // this.$router.replace({
                                    //     name: 'work'
                                    // })
                                },2000)
                            }
                        }).catch(err=>{
                            console.log(err,'请求失败');
                        })
                    }
                })
            }else if(this.type==2){
                this.$refs.legalPersonTabFirstModelElRef.validate(bool=>{
                // this.$refs.legalPersonTabSecondModelElRef.validate(bool=>{
                    if(bool){
                        if(this.checked==false||this.checked1==false){
                            this.$message.warning('请勾选并同意《大鸿签服务协议》《隐私政策》《数字证书服务协议》及 大鸿签采集人脸识别数据用于认证服务')
                            return
                        }
                        _this.scanurl = `https://www.signzg.com/pcface/index.html?enterpriseId=${Cookies.get('admin_id')}&idcard=${_this.legalPersonTabFirstModel.idcard}&legalPerson=${encodeURIComponent(_this.legalPersonTabFirstModel.legalPerson)}&phone=${_this.legalPersonTabFirstModel.phone}&type=0#/`
                        // _this.scanurl = `http://192.168.10.129:8081?enterpriseId=${Cookies.get('admin_id')}&idcard=${_this.legalPersonTabFirstModel.idcard}&legalPerson=${encodeURIComponent(_this.legalPersonTabFirstModel.legalPerson)}&phone=${_this.legalPersonTabFirstModel.phone}&type=0#/`

                        // _this.scanurl = `https://www.signzg.com/pcface/index.html?enterpriseId=${Cookies.get('admin_id')}&idcard=${_this.legalPersonTabSecondModel.idcard}&legalPerson=${encodeURIComponent(_this.legalPersonTabSecondModel.legalPerson)}&type=0#/`
                        // _this.scanurl = `http://192.168.10.129:8081?enterpriseId=${Cookies.get('admin_id')}&idcard=${_this.legalPersonTabSecondModel.idcard}&legalPerson=${encodeURIComponent(_this.legalPersonTabSecondModel.legalPerson)}&type=0`
                        _this.scanshow = true
                    }
                })
            }
            
        },
        double(){
            let _this=this
            _this.scanshow = false
            // this.$refs.legalPersonTabSecondModelElRef.resetFields()
            
        },
        refreshscan(){
            this.$refs.scanmsg.bindQRCode()
        },
        // 帮助中心
        goHelp(){
            window.open('https://www.signzg.com/#/helpCenter')
        },
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
.scancertificat {
    text-align: center;
    padding: 50px 0 50px;
}

.title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
}

.shutup {
    background-color: #3b4049;
    padding: 15px 20px;
}




.header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
}

// 头部样式内容结束
.noitembox {
    padding: 15px 30px;
    border: 1px solid #e5e6eb;
    width: 45%;
    border-radius: 5px;
}

.itembox {
    padding: 15px 30px;
    border: 1px solid #0975E0;
    width: 45%;
    border-radius: 5px;


}

.itemtext {
    font-size: 18px;
    font-weight: 500;
    color: #666;
}

.contentpadding {
    padding: 0 40px 100px;
}

.pagepadding {
    padding: 100px 200px 0;
}


.bottomline {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.xyzc {
    margin-top: 300px;
}
</style>
<style lang="scss">
.pagepadding .el-input-group__append {
    background: none;
}

.pagepadding .el-input__inner {
    height: 55px;
}

.el-input.is-disabled .el-input__inner {
    background: none;

}
</style>